<template>
    <div :style="!isMo?'margin-left: 20%; margin-right: 20%; margin-top: 8%; margin-bottom: 10%':'margin-top: 8%; margin-bottom: 45%'">
        <Modal v-model="showXY" title="用户许可协议">
            <h3>
                1.本协议并没有什么用，本网站用作非商用用途。
                <br/>
                <br/>
                2.请在网络上保护自身财产隐私安全，不要多个系统使用同一密码。
                <br/>
                <br/>
                3.同意则代表您允许本网站收集用户浏览器Cookies。
                <br/>
                <br/>
                4.本站主要负责人：刘湘兰；开发人员：杨狄男 陈冠宇。
                <br/>
                <br/>
                5.本站所有知识版权归作者持有。
                <br/>
                <br/>
                6.本网站不允许任何违法行为。
                <br/>
                <br/>
                7.编不下去了，先这么多。。。
                <br/>
                <br/>
                8.阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
            </h3>
            <span slot="footer"><Button type="primary" @click="showXY = false">关闭</Button></span>
        </Modal>
        <Card dis-hover>
            <p slot="title">注册</p>
            <Form :model="form" ref="form" :rules="rules" label-position="left" :label-width="100">
                <FormItem label="注册类型" prop="type">
                    <RadioGroup v-model="form.type">
                        <Radio label="1" border>
                            <span>访客</span>
                        </Radio>
                        &nbsp;
                        <Radio label="0" border>
                            <span>学生</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <Row :gutter="20" v-if="form.type==0">
                    <Col span="12">
                        <FormItem label="班别" prop="clazz">
                            <InputNumber :min="1" :max="38" v-model="form.clazz"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="届数" prop="sess">
                            <InputNumber :min="2000" :max="2021" v-model="form.sess"></InputNumber>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="用户名" prop="name" style="margin-right: 10%">
                    <Input v-model="form.name" placeholder="your name"></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem label="邮箱" prop="email" style="margin-right: 10%">
                    <Input v-model="form.email" placeholder="非必填字段，建议填写，如QQ邮箱为：你的qq号@qq.com"></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem label="密码" prop="password" style="margin-right: 10%">
                    <Input v-model="form.password" type="password" placeholder="password" password></Input>
                </FormItem>
                <FormItem label="确认密码" prop="password" style="margin-right: 10%">
                    <Input v-model="vrf" type="password" placeholder="verification" password></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem>
                    注册则默认同意
                    <a style="text-decoration: none; color: dodgerblue" @click="showXY = true">用户许可协议</a>
                    <br/>
                    <Button type="primary" @click="submit('form')" style="width: 25%"> 注 册</Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "Reg",
        data() {
            return {
                isMo: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                vrf: '',
                showXY: false,
                show: false,
                form: {
                    name: '',
                    email: '',
                    password: '',
                    clazz: '',
                    type: 1,
                    sess: '',
                },
                rules: {
                    name: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {type: 'string', min: 4, message: '密码不能少于四位', trigger: 'blur'}
                    ],
                    email: [
                        {type: 'email', message: '格式错误', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择', trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.form.type == 0 && (this.form.clazz == '' || this.form.sess == '')) {
                            this.$Message.error('请检查班级或届数')
                            return false;
                        }
                        if (this.form.password != this.vrf){
                            this.$Message.error('密码不一致，请检查')
                            return false;
                        }
                        const that = this;
                        axios.post('/reg', that.form).then(function (resp) {
                            if (resp.data) {
                                that.$Message.success('注册成功');
                                axios.post('/login', that.form).then(function (resp2) {
                                    setTimeout("location.href='/'", 500);
                                })
                            } else {
                                that.$Message.error('注册失败，用户名已存在');
                            }
                        });
                    } else {
                        this.$Message.error('请检查信息是否填写完整');
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>